<template>
  <div id="home">
    <div class="Memo_t">
      <span>简约备忘录</span>
      <img v-on:click="Personal()" src="../assets/images/Personal.png" alt="">
    </div>
    <div class="search">
      <input type="search" v-model="search_msg" name="" id="" placeholder="搜索" v-on:keyup.enter="submit()" v-on:input="inp()">
      <img src="../assets/images/search.png" alt="" v-on:click="filder(search_msg)">
    </div>
    <ul id="OA_task_1" class="mui-table-view">
      <li class="mui-table-view-cell mui-transitioning" v-for="(v,i) in msg" :key="i">
        <div v-on:click="del(i)" class="mui-slider-right mui-disabled">
          <a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);">删除</a>
        </div>
        <div class="list mui-slider-handle" style="transform: translate(0px, 0px);" v-on:click="Preview(v.title,v.content,v.time)">
          <div class="item">
            <div class="content" v-text="v.title">内容内容内容内容内容内容内容</div>
            <div class="time">{{v.time}}</div>
          </div>
        </div>
        <!-- <div class="mui-slider-handle" style="transform: translate(0px, 0px);">
          左滑显示删除按钮
        </div> -->
      </li>
    </ul>
    <div class="new">
      <img v-on:click="news" src="../assets/images/NewDoc.png" alt="">
    </div>
  </div>
</template>
<script>
import {getStorage} from 'utils_c'
export default {
  data() {
    return {
      search_msg: "",
      msg: "",
      msgs: ""
    };
  },
  created() {
    this.msg = getStorage("msg")? getStorage("msg"):[];
    this.msgs = this.msg;
  },
  methods: {
    news() {
      this.$router.push({
        name: "News",
        params: {
          title: '',
          content: '',
          state: "0"
        }
      });
    },
    Preview(title, content, time) {
      this.$router.push({
        name: "News",
        params: {
          title: title,
          content: content,
          time: time,
          state: "1"
        }
      });
    },
    filder(search) {
      var that = this;
      if (search == "") {
        this.msg = this.msgs;
        that.msg = that.msg.filter(v => v.title);
      } else {
        this.msg = this.msgs;
        that.msg = that.msg.filter(v => v.title.includes(search));
        // that.msg = that.msg.filter(v => v.title == search);
      }
    },
    submit() {
      this.filder(this.search_msg);
    },
    inp() {
      this.filder(this.search_msg);
    },
    Personal() {
      console.log(121);
      mui.toast("个人中心暂未开通", { duration: "1500", type: "div" });
    },
    del(i) {
      var d = JSON.parse(window.localStorage.getItem("msg"));
      console.log(d);
      d.splice(i, 1);
      window.localStorage.setItem("msg", JSON.stringify(d));
      this.msg = d;
      this.msgs = this.msg;
    }
  }
};
</script>
<style scoped>
#home .mui-table-view:before,
#home .mui-table-view:after {
  height: 0;
}
#home .mui-table-view-cell {
  padding: 0;
  margin-bottom: 8px;
}
.Memo_t {
  text-align: center;
  /* border: 1px solid red; */
  padding: 10px 0 22px;
  position: relative;
  font-size: 15px;
}
.Memo_t img {
  width: 28px;
  height: 25px;
  position: absolute;
  right: 17px;
  top: 1px;
  padding: 5px 5px 0px;
}
.search {
  display: flex;
  padding: 0 8px;
  position: relative;
  padding-bottom: 15px;
}
.search input {
  border: none;
  width: 100%;
  padding: 8px;
  padding-right: 42px;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.09);
}
.search img {
  position: absolute;
  top: 4.5px;
  right: 10px;
  width: 25px;
  height: 25px;
  padding: 2.5px;
}

.list {
  display: flex;
  padding: 2px 8px;
}
.item {
  display: flex;
  overflow: hidden;
  padding: 15px 8px;
  width: 100%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.item .content {
  width: 62%;
  padding-right: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item .time {
  flex: 1;
  font-size: 12px;
  color: #333;
}

.new img {
  width: 38px;
  height: 38px;
  position: fixed;
  bottom: 30px;
  right: 30px;
}
</style>


